<script setup>

import {
    reactive,
    onMounted,
    nextTick,
    ref,
} from "vue";
import { columns } from './index.js'
import baseModel from "@/components/baseModel/baseModel.vue";

import {
    ReloadOutlined,
    SearchOutlined,
    RightOutlined
} from "@ant-design/icons-vue";
import request from "@/common/utils/request";

// 外链列表组件
import linkList from './linkList.vue'

// 创建外链
// import Creatingdrainagetool from './Creatingdrainagetool.vue'

// 卡片列表
import cartList from './cartList.vue'
const cartListRef = ref(null)

// 创建卡片
import CreatCart from './CreatCart.vue'
const CreatCartRef = ref(null)

import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute()
const state = reactive({
    selection: [
        '待审核',
        '通过',
        '驳回'
    ],
    platform_name: '', // 项目名称
    status: null, // 状态
    splitTime: [], // 操作时间
    list: [], // 列表项
    pageSize: 10,
    page: 1,
    start_time: '',
    end_time: '',
    total: 0,
    activeKey: 1,

})

const tableLoding = ref(false)
// 
onMounted(() => {
    route.query?.type == 'cart' && (state.activeKey = 2)
    getList()

})

const getList = async () => {
    try {
        tableLoding.value = true
        const params = {
            page: state.page,
            pageSize: state.pageSize,
            platform_name: state.platform_name, // 项目名称
            // status: state.status, // 状态
            start_time: state.start_time, // 开始时间
            end_time: state.end_time, // 结束时间
        }
        const res = await request.get('work_ai', '/user/shotstack/toReachCustomers/list', params)
        console.log(res, '抖转微列表');
        state.list = res.result.data
        state.total = res.result.total
        tableLoding.value = false
    } catch (error) {
        tableLoding.value = false
    }

}

const resetFormData = () => {
    state.platform_name = ''
    state.splitTime = [];
    state.start_time = ''
    state.end_time = ''
    nextTick(() => {
        state.page = 1;
        getList();
    });
}
// 去新建页面
const toCreatingdrainagetool = () => {
    router.push({
        name: 'Creatingdrainagetool'
    })
}

// 日期选择
const timeChange = (data, dataString) => {
    state.activeTime = "";
    state.start_time = dataString[0];
    state.end_time = dataString[1];
};

// 创建和编辑外链 组件实例
// const CreatingdrainagetoolRef = ref(null)
// const linkId = ref('')
// 列表页, emit 编辑外链
const editLink = (id) => {
    router.push({
        name: 'Creatingdrainagetool',
        query: {
            id
        }
    })
    // debugger
    // linkId.value = id
    // nextTick(() => {
    //     state.activeKey = 2
    // })
}


// 修改分页信息
const tabChange = (page, pageSize, sorter) => {
    state.page = page.current;
    state.pageSize = page.pageSize;
    // 排序
    // if (sorter.order == 'ascend') {
    //   state.orderBys.publish_time = 'asc'
    // } else if (sorter.order == 'descend') {
    //   state.orderBys.publish_time = 'desc'
    // } else {
    //   state.orderBys.publish_time = ''
    // }
    nextTick(() => {
        getList();
    })
};

const imgUrl = ref('')
const dialog = ref(null)
// 预览图片
const handlePreview = (link) => {
    imgUrl.value = link
    nextTick(() => {
        if (imgUrl.value) {
            // dialog.value && dialog.value.closeModal()
            dialog.value && dialog.value.showModal();
        }
    })
}

</script>

<template>

    <a-alert message="本平台积极配合警方反诈工作！应公安部要求，我们将对生成的内容进行检测，如发现违反法律法规（包括但不限于诈骗，色情，贷款，博彩，赌球等）,则立即封禁相关账号，且不予退款。" banner
        closable style=' width:101.7%;margin-top:-10px; margin-left:-10px;padding-buttom:5px;' />
    
    <a-row>
      <a-col :span="22">
        <h4 style="margin-left:15px">使用步骤</h4>
            <a-steps :percent="100" :current="3" size="small">
                <a-step title="第一步" description="先点击外链管理进行创建外链" > 
                    <template #icon>
                    <RightOutlined />
                    </template>
                </a-step>
                <a-step title="第二步"  description="点击【卡片管理】进行创建卡片选择要创建卡片的外链"> 
                    <template #icon>
                        <RightOutlined />
                    </template></a-step>
                <a-step title="第三步" description="通过苹果手机转换之后成抖音卡片后，再点击【开启跳转】就可以正常使用了" />
            </a-steps>
      </a-col>
    </a-row>

    <div class="content_box">

        <template v-if="true">
            <!--  标签页 -->
            <a-tabs v-model:activeKey="state.activeKey">
                <a-tab-pane :key="1" tab="外链管理" force-render></a-tab-pane>
                <a-tab-pane :key="2" tab="卡片管理" force-render></a-tab-pane>
            </a-tabs>
            <template v-if="state.activeKey == 1">
                <!-- 外链页面 -->
                <!-- @toCreatLink="state.activeKey = 2" -->
                <linkList ref="linkListRef" @editLink="editLink"></linkList>
            </template>

            <!-- 创建外链 -->
            <!-- <template v-if="state.activeKey == 2">
                <Creatingdrainagetool @clearId="linkId = ''" ref="CreatingdrainagetoolRef" :id="linkId">
                </Creatingdrainagetool>
            </template> -->

            <template v-if="state.activeKey == 2">
                <!-- 卡片列表 -->
                <cartList ref="cartListRef">
                </cartList>
            </template>

            <!-- 卡片列表 -->
            <!-- <template v-if="state.activeKey == 4">
                <CreatCart ref="CreatCartRef">
                </CreatCart>
            </template> -->

        </template>

        <!-- 原本的抖转微 -->
        <template v-if="false">
            <a-config-provider prefix-cls="ss">
                <div class="TiktoktoWechat">
                    <!-- 头部 -->
                    <div class="header_box">
                        <!-- <a-button style=" " @click="goback">返回</a-button> -->
                        <span>引流工具</span>
                    </div>
                    <!-- 下方搜索条件 -->
                    <div class="serch_box">
                        <div class="from_box">
                            <div class="serch_item">
                                <div class="n-input-group">
                                    <a-button style="width: 130px">项目名称</a-button>
                                    <a-input v-model:value="state.platform_name" placeholder="请输入项目名称" allowClear
                                        style="width: calc(100% - 130px)" />
                                </div>
                                <div class="n-input-group">
                                    <a-button style="width: 130px">操作时间</a-button>
                                    <a-range-picker @change="timeChange"
                                        style="width: calc(100% - 130px); border-radius: 0 5px 5px 0"
                                        :format="'YYYY-MM-DD'" valueFormat="YYYY-MM-DD"
                                        v-model:value="state.splitTime" />
                                </div>
                            </div>

                            <div class="top_btn">
                                <a-button type="primary" style="border-radius: 5px" @click="getList">
                                    <SearchOutlined />查询
                                </a-button>
                                <a-button style="margin-left: 10px; border-radius: 5px" @click="resetFormData">
                                    <ReloadOutlined />重置
                                </a-button>
                            </div>
                        </div>

                        <div class="btn_box">

                            <a-button class="addNew" style=" border-radius: 5px" @click="toCreatingdrainagetool"
                                type="primary">
                                新建短链
                            </a-button>
                        </div>
                    </div>

                    <!-- table容器 -->
                    <div class="table_content">
                        <a-table :columns="columns" :data-source="state.list" @change="tabChange" :loading="tableLoding"
                            :pagination="{
                                pageSize: state.pageSize,
                                current: state.page,
                                total: state.total,
                                showSizeChanger: true,
                                showQuickJumper: true,
                                pageSizeOptions: ['5', '10', '20', '50', '100'],
                            }">
                            <template #bodyCell="{ column, record }">
                                <template v-if="column.key === 'all_num'">
                                    <span>{{ (record?.customer_cnt || 0) + ' / ' + (record?.customer_now || 0) }}</span>
                                </template>
                                <template v-if="column.key === 'code_url'">
                                    <div @click="$utils.copyText(`${record.link_name}: ${record.code_url}`)"
                                        class="link_text_img">
                                        <a-tooltip placement="top">

                                            <img :src="record?.link_image" alt="" style="">
                                        </a-tooltip>
                                        <a-tooltip placement="top">
                                            <template #title>
                                                <span>点击复制链接</span>
                                            </template>
                                            <a-button size="small" type="link">{{
                                                record.link_name }}</a-button>
                                        </a-tooltip>
                                    </div>
                                </template>
                                <template v-if="column.key === 'edit'">
                                    <div class="edit_btns">
                                        <a-button @click="$utils.copyText(record.code_url)" size="small"
                                            type="link">复制链接</a-button>
                                        <a-button @click="edit(record.id)" size="small" type="link">编辑</a-button>
                                        <a-popconfirm title="确定删除此项吗?" ok-text="确定" cancel-text="取消"
                                            @confirm="del(record.id)">
                                            <a-button size="small" type="link">删除</a-button>
                                        </a-popconfirm>
                                    </div>
                                </template>

                            </template>
                        </a-table>
                    </div>
                </div>
            </a-config-provider>
        </template>

    </div>


    <baseModel ref="dialog" :contentWidth="'400px'" :zIndex="1011" :maskClosable="true" :centered="false"
        :closable="true">
        <template #title>
            <div class="title_box">
                <span class="title">链接图片预览</span>
            </div>
        </template>
        <template #content>
            <div class="loding_content">
                <img :src="imgUrl" alt="" style="width: 100%; height: 100%" />
            </div>
        </template>
        <template #footer>
            <a-button type="primary" @click="dialog.closeModal()">确定</a-button>
        </template>
    </baseModel>

</template>

<style scoped lang="less">
.content_box {
    background-color: #fff;
    border-radius: 10px;
    padding: 20px;
    margin-top: 10px;


    .TiktoktoWechat {
        padding: 14px;
        min-width: 1100px;


        .header_box {
            margin-bottom: 20px;

            span {
                font-size: 16px;
                font-weight: 600;
                color: #101011;
            }

            // display: flex;
            // height: 32px;
            // line-height: 32px;

            // button {
            //     border-radius: 5px;
            //     margin-right: 5px
            // }
        }

        // 搜索条件
        .serch_box {
            display: flex;
            gap: 10%;
            align-items: start;
            flex-direction: column;

            .btn_box {
                display: flex;
                justify-content: start;

                .addNew {

                    margin-top: 20px;
                }
            }

            .from_box {
                width: 100%;
                display: flex;
                justify-content: space-between;

                .top_btn {
                    display: flex;
                }

                .serch_item {
                    display: flex;
                    gap: 20px;

                    .n-input-group {
                        display: inline-flex;
                        width: 100%;
                        flex-wrap: nowrap;
                        vertical-align: bottom;
                    }

                }

            }

        }

        .table_content {
            margin-top: 20px;

            .link_text_img {
                cursor: pointer;
                display: flex;
                // justify-content: center;
                align-items: center;

                img {
                    width: 40px;
                    height: 40px;
                    object-fit: cover;
                    cursor: pointer;
                }
            }
        }
    }


}
</style>